<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item v-for="row in tableData" :name="row.id" :key="row.id"
                        :disabled="(row.bill_sale_list || []).length == 0"
      >
        <template slot="title">
          <div class="flex justify-between align-center flex-no-wrap" style="width: 100%;">
            <div class="flex justify-start align-center flex-no-wrap">
              <div class="margin-lr-sm">
                <BFFlowStatusTag :name="row.contract_flow_status_name"/>
              </div>
              <div class="margin-lr-sm">
                <BFContractTypeTag :name="row.contract_type_name"/>
              </div>
              <div class="margin-lr-sm">
                <BFStatusTag :name="row.contract_status_name"/>
              </div>
              <div class="margin-lr-sm">
                <BFViewDetailBtn :showTip="contractShowTip" :id="row.id" title="合同"
                                 :name="row.contract_num+'（'+row.contract_date+'）'" size="mini"
                                 @toDetail="openContractDialog"
                />
              </div>
              <div class="margin-lr-sm" style="width: 200px;" v-if="contractShowMoney">
                <el-progress :percentage="getPercent(row.contract_finished, row.contract_discounted_price)"
                             :color="percentLimitColors"
                             :format="(percentage) => formatPercent(percentage, row.contract_finished, row.contract_discounted_price)"
                />
              </div>
            </div>
          </div>
        </template>
        <div class="margin-left" v-if="(row.bill_sale_list || []).length > 0">
          <BillSaleList :tableData="row.bill_sale_list"
                        :saleOrderShowExpand="saleOrderShowExpand"
                        :saleOrderShowTip="saleOrderShowTip"
                        :saleOrderShowMoney="saleOrderShowMoney"
                        :marketOrderShowExpand="marketOrderShowExpand"
                        :marketOrderShowTip="marketOrderShowTip"
                        :adMakeOrderShowExpand="adMakeOrderShowExpand"
                        :adMakeOrderShowTip="adMakeOrderShowTip"
                        :workOrderShowExpand="workOrderShowExpand"
                        @openSaleOrderDialog="openSaleOrderDialog"
                        @openMarketOrderDialog="openMarketOrderDialog"
                        @openADMakeOrderDialog="openADMakeOrderDialog"
                        @openReceivedDialog="openReceivedDialog"
                        @openInvoiceDialog="openInvoiceDialog"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import BillSaleList from './BillSaleList'
import BFFlowStatusTag from './BFFlowStatusTag'
import BFContractTypeTag from './BFContractTypeTag'
import BFStatusTag from './BFStatusTag'
import BFViewDetailBtn from './BFViewDetailBtn'
import common from '@/utils/common.js'
import {
  percentLimitColors,
  getPercentage
} from '@/utils/util.js'
import {
  cloneDeep
} from 'lodash'

export default {
  name: 'BussinessFlowComponentContractList',
  components: {
    BillSaleList,
    BFFlowStatusTag,
    BFContractTypeTag,
    BFStatusTag,
    BFViewDetailBtn
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    contractShowTip: {
      type: Boolean,
      default: false
    },
    contractShowMoney: {
      type: Boolean,
      default: false
    },
    saleOrderShowExpand: {
      type: Boolean,
      default: false
    },
    saleOrderShowTip: {
      type: Boolean,
      default: false
    },
    saleOrderShowMoney: {
      type: Boolean,
      default: false
    },
    marketOrderShowExpand: {
      type: Boolean,
      default: false
    },
    marketOrderShowTip: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowExpand: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowTip: {
      type: Boolean,
      default: false
    },
    workOrderShowExpand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      percentLimitColors
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    openContractDialog(id) {
      this.$emit('openContractDialog', id)
    },
    openSaleOrderDialog(id) {
      this.$emit('openSaleOrderDialog', id)
    },
    openMarketOrderDialog(id) {
      this.$emit('openMarketOrderDialog', id)
    },
    openADMakeOrderDialog(id) {
      this.$emit('openADMakeOrderDialog', id)
    },
    openInvoiceDialog(id) {
      this.$emit('openInvoiceDialog', id)
    },
    openReceivedDialog(ids) {
      this.$emit('openReceivedDialog', ids)
    },
    getPercent(finished, total) {
      return getPercentage(finished, total)
    },
    formatPercent(percentage, finished, total) {
      return '￥' + finished + ' / ￥' + total + ' (' + this.getPercent(finished, total) + '%)'
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
